<template>
  <div class="reset-step-view">
    <t-form ref="formRef" :rules="FORM_RULES_TWO" :data="formData" label-align="top" :required-mark="false">
      <t-form-item label="请输入新密码" name="password">
        <div class="pwd-wrap">
          <t-input
            v-model="formData.password"
            type="password"
            :clearable="true"
            placeholder="请输入新密码"
            @enter="next"
          >
          </t-input>
          <pwd-strength v-if="formData.password" :value="formData.password"></pwd-strength>
        </div>
      </t-form-item>
      <t-form-item label="请再输入一次新密码" name="repassword" :rules="passwordRules">
        <t-input
          v-model="formData.repassword"
          :clearable="true"
          type="password"
          placeholder="请再输入一次新密码"
          @enter="next"
        >
        </t-input>
      </t-form-item>

      <t-form-item>
        <div class="btn-wrap">
          <t-button class="login-btn" variant="outline" @click="pre">上一步</t-button>
          <t-button class="login-btn" theme="primary" @click="next">下一步</t-button>
          <div class="return-login" @click="emits('event', { type: 'login' })">
            <svg-icon class="icon" name="return"></svg-icon>
            <span class="text">返回登录</span>
          </div>
        </div>
      </t-form-item>
    </t-form>
  </div>
</template>

<script setup lang="ts">
import { FormInstanceFunctions, FormRule } from 'tdesign-vue-next';
import { ref } from 'vue';

import { FORM_RULES_TWO, INIT_DATA_TWO } from '../datas/reset';

const props = defineProps({
  postData: {
    type: Object as any,
    default: () => {
      return {};
    },
  },
});

const emits = defineEmits(['event']);

const formData = ref({ ...INIT_DATA_TWO });
const formRef = ref<FormInstanceFunctions>();

const passwordRules: FormRule[] = [
  { required: true, message: '请再输入一次新密码', trigger: 'blur' },
  {
    validator: (value: string) => {
      console.log(value, formData.value.password);
      if (formData.value.password !== value) {
        return { result: false, message: '两次输入密码不一致', type: 'error' };
      }
      return { result: true, message: '', type: 'success' };
    },
    trigger: 'blur',
  },
];

const next = async () => {
  const validate = await formRef.value.validate();
  if (validate === true) {
    // 接口请求
    // to do...
    console.log('next', props.postData, formData.value);
    emits('event', { type: 'next', data: formData.value });
  }
};

const pre = () => {
  emits('event', { type: 'pre' });
};
</script>

<style lang="less" scoped>
.reset-step-view {
  padding-top: 0;

  .btn-wrap {
    .login-btn {
      margin-top: 20px !important;
    }
  }
}
</style>
